<template>
	<view class="box">
		<view class="customer">
			<input type="text" v-model="val" @input="searchVal" placeholder="搜索关键字" />
			<view class="lists" v-for="(item,index) in list">
				<view class="img">
					<image :src="item.avatar_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
				</view>
				<view class="info">
					<view class="contexts">
						<view class="uname">
							<text>{{item.user_name}}</text>
						</view>
						<view class="gender">
							<text v-if="item.user_sex == 1">男 </text>
							<text v-else>女</text>
							<text class="age">{{item.user_age}}岁</text>
						</view>
						<view class="tel" @click="makeTel(index)">
							<text>电话:&emsp;{{item.user_phone}}</text>
							<image src="/static/image/clinic/tel.png" mode="scaleToFill" style="width: 19rpx; height: 24rpx;"></image>
						</view>
						<view class="project">
							<text>预约项目：{{item.items_title}}</text>
						</view>
					</view>
					<view class="quding">
						<text @click="quding(index)">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getList();
		},
		data() {
			return {
				val: "",
				list: null,
				page: 1,
				pageSize: 5,
				countPages: null
			};
		},
		methods: {
			async searchVal(e) {
				this.page = 1;
				let id = this.$store.state.userinfo.id;
				let keyword = this.val;
				let res = await this.$myrequest({
					url: `Subscribe/getList?id=${id}&keyword=${keyword}&pageSize=${this.pageSize}&page=${this.page}`
				});
				this.list = res.data.data;
				this.countPages = res.data.countPage;
			},
			async getList() {
				let id = this.$store.state.userinfo.id;
				let res = await this.$myrequest({
					url: `Subscribe/getList?id=${id}&pageSize=${this.pageSize}&page=${this.page}`,
				});
				this.list = res.data.data;
				this.countPages = res.data.countPage;
			},
			makeTel(index) {
				let tels = "";
				for (let [key, value] of Object.entries(this.list)) {
					if (index == key) {
						tels = value.user_phone;
					};
				};
				uni.makePhoneCall({
					phoneNumber: tels
				});
			},
			async quding(index) {
				let ids = null;
				for (let [key, value] of Object.entries(this.list)) {
					console.log(key);
					if (index == key) {
						ids = value.id;
					};
				};
				let res = await this.$myrequest({
					url: `Subscribe/editStatus`,
					method: "POST",
					data: {
						id: ids
					}
				});
				if (res.data.code == 200) {
					this.getList();
				};
			},

			// async reachBottom() {
			// 	let id = this.$store.state.userinfo.id;
			// 	let openids = this.$store.state.userinfo.openid;
			// 	this.page = ++this.page;
			// 	console.log(`this.page=====`)
			// 	console.log(this.page);
			// 	console.log(`this.page=====`)
			// 	console.log(`===countPages`)
			// 	console.log(this.countPages);
			// 	console.log(`===countPages`)
			// 	if (this.page <= this.countPages) {
			// 		let path =
			// 			`Subscribe/getList?id=${id}&keyword=${this.val}&pageSize=${this.pageSize}&page=${this.page}`;
			// 		let res = await this.$myrequest({
			// 			url: path
			// 		});
			// 		this.list = this.list.concat(res.data.data);
			// 	};
			// },
		},
		onReachBottom() {
			console.log(`出啦啦把`);
			// this.reachBottom();
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F1F3F4;
	}

	.customer {
		width: 100%;
		height: 100%;
		padding: 20rpx;

		input {
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx;
			background-color: #FFFFFF;
			text-align: center;
			margin-bottom: 22rpx;
			font-size: 30rpx;
			color: #969699;
		}
	}

	.lists {
		display: flex;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 18rpx;

			image {
				border-radius: 50%;
			}
		}
	}

	.info {
		display: flex;
		width: 100%;

		.contexts {
			display: flex;
			flex-wrap: wrap;
			padding-top: 40rpx;

			>view {
				display: flex;
				width: 100%;

				text {
					color: #A6A3A6;
				}
			}
		}

		.quding {
			text {
				margin-top: 54rpx;
				margin-right: 20rpx;
				display: inline-block;
				width: 128rpx;
				height: 60rpx;
				background: rgba(65, 214, 184, 1);
				border-radius: 30rpx;
				color: #FFFFFF;
				@include shuipingchuijuzhong;
			}
		}
	}

	.uname {
		text {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(55, 52, 56, 1) !important;
		}
	}

	.gender {
		text {
			&:first-of-type {
				margin-right: 65rpx;
			}
		}
	}

	.tel {
		display: flex;
		align-items: center;

		image {
			margin-left: 20rpx;
		}
	}
</style>
